<template>
    <div class="kfOrderInfo">
        <van-nav-bar
                title="订单信息"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="date-box">
            <div class="time-text">时间</div>
            <div class="line">
                <div class="border-line" v-if="!timeField1">
                    <van-field readonly clickable :value="`请选择`" @click="timePopupShow1 = true; " right-icon="clock-o"/>
                </div>
                <div class="border-line" v-if="timeField1">
                    <van-field readonly clickable :value="$formatDateTime(timeVal1, 'yyyy-MM-dd')"
                               @click="timePopupShow1 = true" right-icon="clock-o"/>
                </div>
                <div class="border-line" v-if="!timeField2">
                    <van-field readonly clickable :value="`请选择`" @click="timePopupShow2 = true;" right-icon="clock-o"/>
                </div>
                <div class="border-line" v-if="timeField2">
                    <van-field readonly clickable :value="$formatDateTime(timeVal2, 'yyyy-MM-dd')"
                               @click="timePopupShow2 = true" right-icon="clock-o"/>
                </div>
            </div>
        </div>
        <van-popup v-model="timePopupShow1" position="bottom">
            <van-datetime-picker v-model="timeVal1" type="date" @cancel="timePopupShow1 = false"
                                 @confirm="timeConfirm1"/>
        </van-popup>
        <van-popup v-model="timePopupShow2" position="bottom">
            <van-datetime-picker v-model="timeVal2" type="date" @cancel="timePopupShow2 = false"
                                 @confirm="timeConfirm2"/>
        </van-popup>
        <div class="card-list">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div v-for="(item,index) in listSource" :key="index" class="card">
                        <div class="card-top" :style="{backgroundImage: 'url(' + imgUrl1 + ')' }">
                            <div class="card-title">
                                <div>{{item.company_name}}</div>
                                <div>{{item.order_status_text}}</div>
                            </div>
                            <div class="single-line">订单时间：{{item.month}}</div>
                            <div class="single-line">产品名称：{{item.goods_name}}</div>
                            <div class="mtext-line">投保人数：{{item.order_num}}</div>
                            <div class="mtext-line">是否开具发票：{{item.is_invoice==1?'是':'否'}}</div>
                            <div class="mtext-line">单价：{{item.unit_price}}</div>
                            <div class="mtext-line">总价：{{item.order_price}}</div>
                        </div>
                        <div class="card-btn" :style="{backgroundImage: 'url(' + imgUrl2 + ')' }">
                            <div @click="confirmOrder(index)"
                                 v-if="(item.order_status == 40 || item.order_status == 50) && button1"
                                 :class="item.order_status == 50?'gray-color':''">{{item.order_status ==
                                40?'确认投保':'已投保'}}
                            </div>
                            <div @click="goUrl(index)" v-if="button2">投保人员</div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <!-- <div class="card-list">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item,index) in listSource" :key="index" class="card" :style="{backgroundImage: 'url(' + imgUrl + ')' }">
                    <div>{{item.company_name}}</div>
                    <div class="card-info">
                        <div>
                            <div>订单时间：</div>
                            <div>{{item.month}}</div>
                        </div>
                        <div>
                            <div>产品名称：</div>
                            <div>{{item.goods_name}}</div>
                        </div>
                        <div>
                            <div>投保人数：：</div>
                            <div>{{item.order_num}}</div>
                        </div>
                        <div>
                            <div>是否开具发票：</div>
                            <div>{{item.is_invoice==1?'是':'否'}}</div>
                        </div>
                        <div>
                            <div>状态：</div>
                            <div>{{item.order_status_text}}</div>
                        </div>
                    </div>

                    <div class="card-btn">
                        <div @click="confirmOrder(index)" v-if="item.order_status == 40 || item.order_status == 50" :class="item.order_status == 50?'gray-color':''">{{item.order_status == 40?'确认投保':'已投保'}} </div>
                        <div @click="goUrl(index)">投保人员</div>
                    </div>
                </div>
            </van-list>
        </div> -->

        <div class="pop-window" v-if="isPop">
            <div class="pop-box">
                <img src="../../../assets/icon/del_btn.png" alt="">
                <div class="tishi-text">您确认要删除吗？</div>
                <div class="confirm-btn">确定</div>
                <img src="../../../assets/icon/close_btn.png" alt="" @click="isPop=false">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "kfOrderInfo",
        data() {
            return {

                imgUrl1: require('../../../assets/img/card_bg1.png'),
                imgUrl2: require('../../../assets/img/card_bg2.png'),

                timeField1: false,
                timeVal1: new Date(),
                timePopupShow1: false,

                timeField2: false,
                timeVal2: new Date(),
                timePopupShow2: false,

                minDate: new Date(),
                maxDate: new Date(),


                listSource: [],
                page: 1,
                limit: 10,
                loading: false,
                finished: false,
                isLoading: false,


                imgUrl: require('../../../assets/img/card_bg.png'),
                list: [],
                date: '',
                show: false,
                isPop: false,
                isConfirm: false,

                button1: false,
                button2: false,

            };
        },
        methods: {
            goUrl(index) {
                console.log(this.listSource[index]);
                this.$router.push(`/kfOrderUserList?id=${this.listSource[index].id}`)
            },
            timeConfirm1() {
                this.timeField1 = true;
                this.timePopupShow1 = false;
                if (this.timeField1 && this.timeField2) {
                    this.onRefresh();
                }

            },
            timeConfirm2() {
                this.timeField2 = true;
                this.timePopupShow2 = false;
                if (this.timeField1 && this.timeField2) {
                    this.onRefresh();
                }
            },
            onRefresh() {
                this.page = 1;
                this.onLoad("refresh");
            },
            onLoad(type) {
                let params = {
                    limit: this.limit,
                    page: this.page,
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    member_goods_id: this.$route.query.id,
                    month_time_range: '',
                };
                if (this.timeField1 && this.timeField2) {
                    let timeVal1 = this.timeVal1
                    let timeVal2 = this.timeVal2
                    params.month_time_range = `${this.$formatDateTime(this.timeVal1, 'yyyy-MM-dd')}~${this.$formatDateTime(this.timeVal2, 'yyyy-MM-dd')}`
                }
                this.$post("/api/order_detail/index", params)
                    .then(res => {
                        if (res.code == 1) {
                            if (type == "refresh") {
                                this.listSource = res.data.dataList;
                                this.isLoading = false;
                                this.finished = false;
                            } else {
                                this.listSource = this.listSource.concat(
                                    res.data.dataList
                                );
                            }
                            this.loading = false;
                            this.page++;
                            if (res.data.dataList.length < this.limit) {
                                this.finished = true;
                            }
                        }
                    })
                    .catch(err => {
                    });
            },
            onConfirm(date) {
                const [start, end] = date;
                this.show = false;
                this.date = `${this.formatDate(start)} ~ ${this.formatDate(end)}`;
            },
            confirmOrder(index) {
                if (this.listSource[index].order_status == 50) {
                    return;
                }
                this.$router.push(`/kfconfirmInsurance?oId=${this.listSource[index].id}`)
                // this.$Dialog.confirm({
                //     title: '温馨提示',
                //     message: `确认投保么？`,
                //     closeOnPopstate: true,
                // })
                //     .then(() => {
                //         let params = {
                //             wx_member_id: localStorage.getItem('wx_member_id'),
                //             token: localStorage.getItem('token'),
                //             id: userArr,
                //         };
                //         this.$post("/api/order_detail_roster/del", params)
                //             .then(res => {
                //                 if (res.code == 1) {
                //                     this.onSearch()
                //                     this.$Toast(res.msg);
                //                 } else {
                //                     this.$Toast(res.msg);
                //                 }
                //             })
                //             .catch(err => { });

                //     })
                //     .catch(() => { });

            }
        },
        created() {
            this.button1 = this.$queryMenu('Customer/confirm_insurance')
            this.button2 = this.$queryMenu('Customer/deploy_detail')
            // 实例创建完成
            // this.infoData();
        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#fff");
        }
    }
</script>

<style scoped lang='less'>
    .kfOrderInfo {
    }

    .date-box {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        // margin-bottom: 11px;
        padding: 11px;

        > div:nth-of-type(1) {
            width: 70px;
        }
    }

    .line {
        display: flex;
        align-items: center;

        .border-line {
            border: 1px solid #dcdcdc;
            padding: 0 2px;
            margin: 0 3px;
            border-radius: 3px;
        }

        .time-text {
            flex-wrap: nowrap;
            width: 50px;
        }

        > .money-box {
            position: relative;

            > div {
                flex: 1;
                margin: 3px 6px;
                border: 1px solid #dcdcdc;
                color: #333;
                border-radius: 5px;
            }

            > .money-box {
                position: relative;

                span {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                input {
                    border: none;
                    padding-left: 6px;
                    height: 25px;
                    width: 112px;
                    padding-right: 10px;
                    font-size: 12px;
                    text-align: right;
                }
            }
        }
    }

    .card-list {
        padding: 16px;
        padding-top: 0;

        .card {
            /*height: 200px;*/
            position: relative;
            color: #fff;
            margin-bottom: 15px;

            .card-top {
                display: flex;
                flex-wrap: wrap;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding: 20px 30px;
                border-radius: 8px 8px 0 0 ;

                .card-title {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 13px;

                    > div:nth-of-type(1) {
                        font-size: 16px;
                        font-weight: bold;
                        flex: 1;
                        padding-right: 10px;
                    }

                    > div:nth-of-type(2) {
                        font-size: 12px;
                        padding-left: 10px;
                    }
                }

                .mtext-line {
                    width: 50%;
                    font-size: 13px;
                    flex-wrap: wrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .single-line {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;

                    margin-bottom: 10px;
                }

                > .mtext-line:not(:last-child) {
                    margin-bottom: 10px;
                }
            }

            .card-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 60px;
                padding-left: 0;
                bottom: 8px;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                div {
                    height: 35px;
                    width: 135px;
                    margin: 0 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    opacity: 0.8;
                    color: #366cb3;
                    border-radius: 5px;
                    font-size: 14px;
                }

                .gray-color {
                    background-color: #c8c8c8;
                    color: #fff;
                }
            }
        }
    }

    .pop-window {
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        width: 100vw;
        z-index: 100;

        .pop-box {
            width: 80vw;
            height: 233px;
            margin-left: 10vw;
            background: #fff;
            border-radius: 5px;
            margin-top: 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 45px;
            position: relative;

            > img:nth-of-type(1) {
                width: 69px;
                height: 69px;
            }

            > img:nth-of-type(2) {
                width: 30px;
                height: 30px;
                position: absolute;
                bottom: -45px;
            }

            .tishi-text {
                font-size: 17px;
                color: #333333;
                padding: 20px 0;
            }

            .confirm-btn {
                width: 150px;
                height: 45px;
                background-image: linear-gradient(-83deg, #e61a1a 0%, #f33e3e 100%),
                linear-gradient(#ff6766, #ff6766);
                background-blend-mode: normal, normal;
                border-radius: 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fefefe;
                font-size: 16px;
            }
        }
    }
</style>